<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>INDEX</title>
    <script src="/webjars/jquery/3.2.1/jquery.js"></script>

    <style>
        button {
            display: block;
        }

        iframe {
            display: none;
        }
    </style>
</head>
<body>
<h1>欢迎来到我的世界</h1>

<button onclick="list(this)">CLICK</button>
<iframe src="" frameborder="0"></iframe>

<div style="float:right;width: 60%;height:500px; overflow-x:auto;overflow-y:auto;border:1px solid darkseagreen">
    <pre id="pre"></pre>
</div>

<script>
    $(function () {

    })

    function list(dom) {
        // alert(dom.nodeName)
        var iframe = document.getElementsByTagName("iframe")[0];
        // alert(iframe.nodeName)
        iframe.style.display = "inline-block";
        iframe.src = "/html/listFile.html";
        iframe.height = 500;
        // iframe.width = '100%';
    }
</script>
</body>
</html>